<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";
%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="<%=basePath%>">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<meta content="telephone=no,email=no" name="format-detection">
<meta name="wap-font-scale" content="no">
<title>选择城市</title>
<!-- 公用样式css -->
<link href="css/base.css" rel="stylesheet" type="text/css" />
<link href="css/garden-city.css" rel="stylesheet" type="text/css" />
</head>

<body>
<input id="cityInput" class="city-input" type="text" style="heigth:35px;;line-height:35px;" placeholder="请输入您的目的地"/>
<div class="list-city" id="dwDiv">
    <div class="word1 wor-colour1 wor-height">定位城市</div>
    <ul class="city-brban">
        <li id="dwcity" city="" cityName=""  onclick="_gotoPage(this)">定位中...</li>
    </ul>
</div>
 <div class="list-city">
    <div class="word1 wor-colour1  wor-height">开通城市</div>
    <ul class="city-brban">
		<c:forEach items="${citys}" var="item">
		<li class="citys" city="${item.Code}" cityName="${item.AreaName}" onclick="_gotoPage(this)">${item.AreaName}</li>
		</c:forEach>
    </ul>
</div>
      	<form id="submitForm" action="${url}" method="post">
      		<input type="hidden" name="cityName" value="${cityName}" id="cityName">
      		<input type="hidden" name="city" value="${city}" id="city">
      		<input type="hidden" name="startDate" class="input-enter" value="${startDate}"/>
            <input type="hidden" name="endDate" class="input-leave" value="${endDate}"/>
      		<input type="hidden" name="lat" id="lat" value="${lat}"/>
            <input type="hidden" name="lng" id="lng" value="${lng}"/>
      	</form>
</body>
<script type="text/javascript" src="js/jquery/jquery.js"></script>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

<script>
	$(document).ready(function(){
		wx.config({
			debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
			appId: '${wxMap.appId}', // 必填，公众号的唯一标识
			timestamp: '${wxMap.timestamp}' , // 必填，生成签名的时间戳
			nonceStr: '${wxMap.nonceStr}', // 必填，生成签名的随机串
			signature: '${wxMap.signature}',// 必填，签名
			jsApiList: [
				'getLocation' //获取地理位置接口
			]
		});
		wx.ready(function(){
			onSuccess();
		});
		wx.error(function (res) {
			("#dwcity").html("获取位置失败");
		});
        $('#cityInput').bind('input propertychange', function(){
        	if($(this).val()!="" && $(this).val()!=null){
        		var cityName=$(this).val();
        		$(".citys").each(function(){
        			if($(this).attr("cityName")==cityName||$(this).attr("cityName").indexOf(cityName) != -1){
        				$(this).show();	
        			}else{
        				$(this).hide();	
        			}
        		});
        	}else{
        		$(".citys").show();
        	}
        });
	});
	//成功时
	function onSuccess(){
		if($("#lat").val()==null||$("#lat").val()==""){
			wx.getLocation({
				type: 'wgs84',
				complete:function(argv){
					if(argv.errMsg=="getLocation:ok"){
						$("#lat").val(argv.latitude);
						$("#lng").val(argv.longitude);
						onSuccess();
					}else{
						$("#dwcity").html("暂未获取到位置信息");
					}
				},
				cancel: function (res) {
					$("#dwcity").html("用户拒绝授权获取地理位置");
				}
			});
		}else{
			var data={
	        	location:$("#lat").val()+","+$("#lng").val(),
		    　　　　　key:"EOIBZ-7MGE3-UD43R-YOZMB-37FYT-RHBGQ",
		    	get_poi:0,
		    	output:"jsonp"
		    }
		    var url="http://apis.map.qq.com/ws/geocoder/v1/?";
		    $.ajax({
		        type:"get",
		        dataType:'jsonp',
		        data:data,
		        jsonp:"callback",
		        jsonpCallback:"QQmap",
		        url:url,
		        success:function(json){
		            if(json.status==0){
		            	var city=json.result.address_component.city;
		            	var NOTcity=true;
		            	$(".citys").each(function(){
		            		if($(this).attr("cityName")==city){
		            			$("#dwcity").attr("cityName",city);
		            			$("#dwcity").attr("city",$(this).attr("city"));
		            			$("#dwcity").html(city);
		            			NOTcity=false;
		            			return; 
		            		}
		            	})
		            	if(NOTcity){
		            		$("#dwcity").html("非开通城市");
		            	}
		            }else{
		           		$("#dwcity").html("定位城市失败");
		            }
		        },
		        error : function(err){}
			});
		}
	}
	
    function _gotoPage(obj){
		if($(obj).attr("city")!=null && $(obj).attr("city")!=""){
			$("#city").val($(obj).attr("city"));
			$("#cityName").val($(obj).attr("cityName"));
			$("#submitForm").submit();
		}
	}
</script>
</html>
